<template>
  <div class="coupon">
    <el-form ref="insertForm" class="formStyle" :model="insertModel">
      <div class="couponInfo">
        <div class="title">优惠券信息</div>
        <div class="info">
          <el-form-item label="优惠券名称：" prop="name">
            <span>{{ insertModel.name }}</span>
          </el-form-item>
          <el-form-item label="部门：" prop="departmentIds">
            <span>{{ insertModel.departmentNames }}</span>
          </el-form-item>
          <el-form-item label="岗位：" prop="">
            <span>{{ insertModel.postNames }}</span>
          </el-form-item>
          <el-form-item label="人员：" prop="">
            <span>{{ insertModel.userNames }}</span>
          </el-form-item>
          <el-form-item label="发放频率：" prop="" :style="{ height: insertModel.rate == 1 ? '60px' : '20px' }">
            <el-radio v-model="insertModel.rate" :disabled="insertModel.rate != 1" :label="1">周期性发放</el-radio>
            <el-radio v-model="insertModel.rate" :disabled="insertModel.rate != 2" :label="2">单次发放</el-radio>
            <div v-if="insertModel.rate == 1">
              <span>每</span>
              <span>{{ insertModel.per }}</span>
              <span v-if="insertModel.cycle == 1">年</span>
              <span v-else-if="insertModel.cycle == 2">月</span>
              <span v-else>日</span>
              <span style="margin-left: 7px">起始计算时间</span>
              <span>{{ insertModel.startTime }}</span>
              <span style="margin-left: 7px"> 有效期限即发放周期，凌晨发放；</span>
              <span style="font-weight: 700"> 首次发放：</span>
              <span>{{ insertModel.provideTime }}，</span>
              <span style="font-weight: 700"> 下次发放时间：</span>
              {{ insertModel.nextProvideTime }}
            </div>
          </el-form-item>
          <el-form-item label="状态：" prop="">
            <el-radio v-model="insertModel.enabledMark" :disabled="insertModel.enabledMark != 1" :label="1"
              >启用</el-radio
            >
            <el-radio v-model="insertModel.enabledMark" :disabled="insertModel.enabledMark != 0" :label="0"
              >禁用</el-radio
            >
          </el-form-item>
          <el-form-item class="time" label="" prop="" :style="{ height: insertModel.rate == 2 ? '60px' : '20px' }">
            <div v-if="insertModel.rate == 2">
              <span>发放时间</span>
              <span>{{ insertModel.provideTime }}</span>
              <span style="margin-left: 7px">有效期</span>
              <span>{{ insertModel.startTime }}</span>
              <span style="margin-left: 7px">至</span>
              <span>{{ insertModel.endTime }}</span>
            </div>
          </el-form-item>
        </div>
      </div>

      <div class="materialInfo">
        <div class="title">物料信息</div>
        <el-form-item label="" />
        <LPTablePage
          :show-index="true"
          :show-indexfixed="false"
          style="margin-left: 30px; margin-right: 30px; margin-bottom: 20px"
          index-label="序号"
          :show-page="false"
          :table-data="insertData"
          :table-column="insertColumn"
          :total="total"
          :current-page="currentPage"
          align="center"
        >
          <template slot="smallCategoryNo" slot-scope="{ row }">
            <div v-if="row.level >= 3">{{ row.smallCategoryNo }}</div>
            <div v-else />
          </template>
          <template slot="smallCName" slot-scope="{ row }">
            <div v-if="row.level >= 3">{{ row.smallCName }}</div>
            <div v-else />
          </template>
          <template slot="materialCode" slot-scope="{ row }">
            <div v-if="row.level == 4">{{ row.materialCode }}</div>
            <div v-else />
          </template>
          <template slot="materialName" slot-scope="{ row }">
            <div v-if="row.level == 4">{{ row.materialName }}</div>
            <div v-else />
          </template>
        </LPTablePage>
      </div>
    </el-form>

    <div class="log">
      <el-form ref="ordersProducts" :inline="true" label-width="90px" class="">
        <el-row>
          <el-col>
            <div class="title">操作日志</div>
          </el-col>
        </el-row>
        <LPTablePage
          style="margin-left: 30px; margin-right: 30px"
          :show-index="false"
          :table-data="logData"
          :table-column="logColumn"
          :show-page="false"
          align="center"
        />
      </el-form>
    </div>

    <el-button class="button" size="meduim" @click="thisClose"> 关闭 </el-button>
  </div>
</template>

<script>
import { getByIdCouponList } from '@/api/LaborProtection/counpon'
import { operationLog } from '@/api/LaborProtection/operationLog'
import LPTablePage from '@/components/LPTablePage/index.vue'

export default {
  name: 'CouponDetail',
  components: { LPTablePage },
  props: {
    backData: {
      type: String,
      default: ''
    },
    goToUrl: {
      type: String,
      default: ''
    },
    couponId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      total: 0,
      currentPage: 1,
      pageSize: 10,
      insertData: [],
      // 表格字段
      insertColumn: [
        { label: '物料大类', prop: 'largeCName' },
        { label: '中类编码', prop: 'middleCName' },
        { label: '物料中类', prop: 'middleCategoryNo' },
        { label: '小类编码', prop: 'smallCategoryNo', render: true },
        { label: '物料小类', prop: 'smallCName', render: true },
        { label: '物料编码', prop: 'materialCode', render: true },
        { label: '物料名称', prop: 'materialName', render: true },
        { label: '数量', prop: 'count' }
      ],
      logData: [],
      logColumn: [
        { label: '操作时间', prop: 'createTime' },
        { label: '操作人', prop: 'createName' },
        { label: '操作内容', prop: 'remark' }
      ],
      insertDailog: false,
      dialogTitle: '',
      insertModel: {
        enabledMark: 1,
        rate: 1,
        departmentIds: [],
        userIds: [],
        postIds: []
      }
    }
  },
  mounted() {
    this.handleByIdList()
    this.operationLog()
  },
  methods: {
    operationLog() {
      const params = {
        SourceId: this.couponId
      }
      operationLog(params).then((res) => {
        this.logData = res.items
      })
    },
    thisClose() {
      if (this.goToUrl == '') {
        this.$emit('detailClose')
      } else {
        this.$router.push({
          path: `${this.goToUrl}`,
          query: {
            data: this.backData
          }
        })
      }
    },
    handleByIdList() {
      if (this.couponId == '') return
      getByIdCouponList(this.couponId).then((res) => {
        this.insertModel = JSON.parse(JSON.stringify(res))
        this.insertData = res.couponMaterials
        if (res.postIds == '') {
          this.insertModel.userNames = res.userIds
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.coupon {
  background-color: #fff;
}

::v-deep .search-bar input.el-input__inner {
  width: 2rem;
}

.formStyle {
  ::v-deep {
    .el-input__inner[style='height: 36px;'] {
      height: 34px !important;
    }
  }
}
::v-deep .el-form-item__label {
  font-weight: normal;
  color: #666666;
}
.couponInfo {
  .info {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    margin: 0 45px;
    border-bottom: 1px solid #ededed;

    .el-form-item {
      width: calc(33%);
      height: 20px;
    }
    .time {
      color: red;
    }
  }
}

.title {
  margin-left: 60px;
  padding: 30px 0 20px 0;
  font-size: 16px;
  font-weight: 550;
  &::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 16px;
    position: absolute;
    left: 45px;
    background: #0076ff;
  }
}

.log {
  .title {
    padding-bottom: 30px;
  }
}

.button {
  width: 108px;
  position: relative;
  left: 50%;
  top: 30px;
  transform: translate(-50%);
}
</style>
